<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折现图</title>
</head>

<body>
    <div class="view" style="width: 1000px;height: 500px;">
        <!-- 折线图 -->
        <div id="handlerView" style="width: 100%;height: 100%;"></div>
    </div>

    <script src="./base_js/echarts.min.js"></script>
    <script>
        const lineChartDom = document.getElementById('handlerView')

        // 指定图表的配置项和数据
        const MONTHS = [
            '01月',
            '02月',
            '03月',
            '04月',
            '05月',
            '06月',
            '07月',
            '08月'
        ]

        const SHIPMENT_DATA = new Array(8).fill(0).map(() => Math.floor(Math.random() * 8000))

        function renderChartEcharts() {
            // 基于准备好的dom，初始化echarts实例
            const lineChart = echarts.init(lineChartDom)

            const chartOptions = {
                tooltip: { // 提示框组件
                    trigger: 'axis', // 坐标轴触发
                    // 提示框浮层内容格式器：自定义
                    formatter: ` 
                        <span class="chart-title">{b}访问量</span><br />
                        <h4 class="chart-data">
                          访问量： <span>{c0}</span>次<br />
                        </h4>
                    `,
                    valueFormatter: () => '', // tooltip 中数值显示部分的格式化回调函数
                    axisPointer: { // 指示器样式
                        type: 'line',
                        label: {
                            backgroundColor: '#6a7985'
                        },
                        lineStyle: {
                            type: 'dashed',
                            color: '#87B1FE'
                        }
                    }
                },
                legend: {
                    right: 0 // 图例组件离容器右侧的距离
                },
                grid: { // 图表位置
                    left: '2%',
                    top: '12%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [ // x轴
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false
                        },
                        data: MONTHS // x轴数据
                    }
                ],
                yAxis: [ // y轴
                    {
                        type: 'value',
                        name: '单位(件)',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#E7E7E7'
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '办件数量',  // 系列名称
                        color: '#528DFB', // 颜色
                        type: 'line', // 图表类别
                        /*
                            'samesign' 只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。
                            'all' 堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。
                            'positive' 只堆积正值。
                            'negative' 只堆叠负值。
                        */
                        stack: 'Shipment', // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
                        symbol: 'circle',
                        areaStyle: { // 区域填充样式。设置后显示成区域面积图。
                            color: { // 填充的颜色 -- 自定义区域渐变颜色
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0.25,
                                        color: '#CBDDFE'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ]
                            }
                        },
                        lineStyle: { // 线条样式
                            color: '#528DFB'
                        },
                        emphasis: { // 折线图的高亮状态
                            /*
                                'none' 不淡出其它图形，默认使用该配置。
                                'self' 只聚焦（不淡出）当前高亮的数据的图形。
                                'series' 聚焦当前高亮的数据所在的系列的所有图形。
                            */
                            focus: 'series'
                        },
                        data: SHIPMENT_DATA
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            lineChart.setOption(chartOptions)
            lineChart.resize()
            window.addEventListener('resize', () => {
                lineChart.resize()
            })
        }

        renderChartEcharts()
    </script>
</body>

</html>